<template>
  <div class="box">
    <header>
      <div class="yuedu">
        <router-link to="/Shouye"
          ><span class="iconfont icon-fanhui"></span
        ></router-link>
        真题阅读
        <div>
          <i class="iconfont icon-shenglvehao"></i>
          <i class="iconfont icon-cross"></i>
        </div>
      </div>
    </header>
    <main>
      <!-- 形成滚动区域 -->
      <section>
        <div class="dazao">
          <ul>
            <li>
              四级
              <p></p>
            </li>
            <li>六级</li>
            <li>考研</li>
          </ul>

          <dl class="bang">
            <!-- <dd class="bangleft">{{ $store.state.year }}</dd> -->
            &nbsp;&nbsp;&nbsp;
            <dd class="bangright">2020</dd>
            &nbsp;&nbsp;&nbsp;
            <dd class="bangright">2019</dd>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <!-- <input type="button" value="改变年份" @touchstart="addAge" /> -->
          </dl>
          <!-- <figure>
                    <div class="shang">构建未来:“鼓捣”和兴趣式学习</div>
                    <div class="zhong">Building the Future:Tinkering and Playful Learning </div>
                    <div class="xia">
                        <span> CET4.2021年6月第1套.阅读理解.Section C</span>
                        <img src="../assets/img/yuedu1.png" alt="">
                    </div>
                </figure>
                <figure>
                    <div class="shang">为何员工无法得到满意的IT服务</div>
                    <div class="zhong">Waking up to Why Workers Can't Get No IT Satisfation</div>
                    <div class="xia">
                        <span> CET4.2021年6月第1套.阅读理解.Section C</span>
                        <img src="../assets/img/yuedu1.png" alt="">
                    </div>
                </figure> -->

          <Ydxinxis class="ydxinxis" />
        </div>
      </section>
    </main>
    <!-- <footer>
      <div>
        <i class="iconfont icon-cidianku"></i>
        词典
      </div>
      <div>
        <i class="iconfont icon-shipin"></i>
        视频
      </div>
      <div>
        <i class="iconfont icon-xuexi"></i>
        学习
      </div>
      <div>
        <i class="iconfont icon-shuyi_wenbenfanyi"></i>
        翻译
      </div>
      <div>
        <i class="iconfont icon-huiyuan"></i>
        会员
      </div>
    </footer> -->
    <dibu></dibu>
  </div>
</template>

<script>
import Ydxinxis from "../components/Ydxinxis";
import dibu from "../components/dibu.vue";
export default {
  name: "YueDu",
  components: { Ydxinxis, dibu },
  methods: {
    // changeCount() {
    //   this.$store.state.count++;
    // },
    // addAge(){
    //   // 派发action，用dispatch
    //   this.$store.dispatch("aAddAge");
    //   console.log("touchstart");
    // }
  },
};
</script>

<style scoped>
.box {
  height: 100%;
  margin: 0 auto;
}

header {
  height: 0.6rem;
  padding: 0 0.16rem;
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .yuedu {
  width: 3.35rem;
  height: 0.37rem;
  padding: 0 0.1rem;
  margin: 0.1rem auto;
  /* display: flex; */
}
header .yuedu {
  /* align-items: center; */
  padding-left: 0.84rem;
  font-size: 0.19rem;
  text-align: center;
  line-height: 0.37rem;
}
header .yuedu div {
  width: 0.8rem;
  height: 0.32rem;
  border: 1px solid #949292;
  border-radius: 0.16rem;
  float: right;
  margin-top: 0.025rem;
  display: flex;
  justify-content: space-around;
}

header .yuedu div .icon-shenglvehao {
  font-size: 25px;
}
header .yuedu div .icon-cross {
  font-size: 25px;
}
/* ------------------------------- */
main {
  flex: 1;
  overflow: auto;
}

.dazao {
  /* height: 1.3rem; */
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto;
  border-radius: 9px;
}

.dazao ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.14rem;
  width: 3rem;
  margin: 0.12rem 0;
  color: #949292;
  padding-left: 0.05rem;
}
.dazao ul li {
  margin-right: 0.23rem;
}
.dazao ul li p {
  width: 0.2rem;
  height: 0.03rem;
  background-color: red;
  margin-left: 0.05rem;
}
.dazao ul li:hover {
  font-weight: bold;
  color: #000;
}

.dazao dl {
  display: flex;
  /* align-items: left;
    justify-content: flex-start; */

  font-size: 0.12rem;
  width: 3rem;
  height: 0.28rem;
  margin: 0.1rem auto;
}
.dazao dl dd {
  width: 0.6rem;
  height: 0.28rem;
  border: 1px solid #f2f2f4;
  border-radius: 0.15rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.1rem;
  background-color: #f2f2f4;
  text-align: center;
  line-height: 0.28rem;
}
.dazao dd:hover {
  color: white;
  background-color: red;
}

/* 底部 */
footer {
  height: 0.6rem;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.24rem;
}
footer div {
  font-size: 0.12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.icon-fanhui:before {
  content: "\e672";
  margin-left: -2.2rem;
  font-size: 0.3rem;
}
</style>
